const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin")
const TerserPlugin = require("terser-webpack-plugin")
const optimizCssAssetsPlugin = require("optimize-css-assets-webpack-plugin")
const path = require('path')

module.exports = {
    mode: 'production',
    // entry:{
    //     page1:'./src/page1',
    //     page2:'./src/page2',
    // },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader']
            }
        ]
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: './js/[name].[chunkhash:5].js'
    },
    optimization: { // 优化项
        // 是否启用压缩，默认情况，生成环境回自动开启
        // minimize: true,
        minimizer: [ // 压缩使用的插件，可以多个
            new TerserPlugin(), // js压缩
            new optimizCssAssetsPlugin() // css压缩
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            // template: "./public/index.html",
            // chunks: ["page1"] 
        }),
        new MiniCssExtractPlugin({
            filename: '[name].[hash:5].css',
            // 配置来自于分割chunk的文件名
            chunkFilename: "common.[hash:5].css"
        })
    ],
    stats: {
        colors: true,
        chunks: false,
        modules: false
    }
}